<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电视剧</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./字体图标/iconfont.css">
    <link rel="stylesheet" href="./css/zhuce.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/show.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 导航条 -->
        <div class="navigation">
            <h1>电影网</h1>
            <ul id="mu">
                <li><a href="index.html">首页</a></li>
                <li><a href="#lang">浪漫</a></li>
                <li><a href="#qing">青春</a></li>
                <li><a href="#yuan">校园</a></li>
            </ul>
            <div class="icon">
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-xiaoxi"></i >
                <div>
                    <a href="zhuce.html" style="color: #fff;">
                        <p>账户</p>
                        <i class="iconfont icon-geren uname"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- 背景图 -->
        <div class="bei">
            <div class="bei_tu">
                <img src="./img/page-header-bg.jpg" alt="">
            </div>
            <!-- 阴影 -->
            <div class="bei_ti">
                <h1>电视剧.</h1>
            </div>
        </div>
    </div>
    <!-- 电视剧内容 -->
    <div class="navbar">
        <div class="content">
            <!-- 浪漫 -->
            <div class="cont-lang" id="lang">
                <div class="lang-title">
                    <p>FIND ANYWHERE ELSE</p>
                    <h1>浪漫</h1>
                </div>
                <div class="cont-lun">
                    <div class="swiper-container" id="tv">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv01.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>大江大河2</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv02.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>少年有点酷</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv03.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>北国英雄</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv04.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>小风暴</h3>

                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv05.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>这就是生活</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv06.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>百岁之好</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv07.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>有翆</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv08.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>浪漫</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>不可思议电台</h3>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <!-- 青春 -->
            <div class="cont-qing" id="qing">
                <div class="qing">
                    <div class="lang-title">
                        <p>FIND ANYWHERE ELSE</p>
                        <h1>青春</h1>
                    </div>
                    <div class="cont-lun">
                        <div class="swiper-container" id="tv02">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv01.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>大江大河2</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv02.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>少年有点酷</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv03.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>北国英雄</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv04.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>小风暴</h3>
    
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv05.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>这就是生活</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv06.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>百岁之好</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv07.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>有翆</h3>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="sw-tu">
                                        <img src="./电视剧图片/tv08.jpg" alt="">
                                        <div class="mu-time">
                                            <p>全50集 , <span>青春</span></p>
                                            <p>PG13</p>
                                        </div>
                                        <h3>不可思议电台</h3>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- 校园 -->
            <div class="cont-yuan" id="yuan">
                <div class="lang-title">
                    <p>FIND ANYWHERE ELSE</p>
                    <h1>校园</h1>
                </div>
                <div class="cont-lun">
                    <div class="swiper-container" id="tv03">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv01.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>大江大河2</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv02.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>少年有点酷</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv03.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>北国英雄</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv04.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>小风暴</h3>

                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv05.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>这就是生活</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv06.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>百岁之好</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv07.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>有翆</h3>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="sw-tu">
                                    <img src="./电视剧图片/tv08.jpg" alt="">
                                    <div class="mu-time">
                                        <p>全50集 , <span>校园</span></p>
                                        <p>PG13</p>
                                    </div>
                                    <h3>不可思议电台</h3>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <!-- 版权 -->
            <div class="copyright">
                    <div class="cop-zt">
                        <p>
                            <i class="iconfont icon-banquan-xian"></i>
                            2020 jQuery大作业 | 电影网站
                        </p>
                        <p>版权所有</p>
                    </div>
            </div>
        </div>
    </div>
    
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.easing.min.js"></script>
    <script>
        var s2 = new Swiper("#tv", {
                slidesPerView: 5,//一屏几张图
                spaceBetween: 50,//图间间距
                autoplay: {
                    delay: 2000,//换图时间
                    disableOnInteraction: false//操作后轮播不停止
                },
                loop: true,
                
            });
        var s3 = new Swiper("#tv02",{
            slidesPerView: 5,//一屏几张图
                spaceBetween: 50,//图间间距
                autoplay: {
                    delay: 2000,//换图时间
                    disableOnInteraction: false//操作后轮播不停止
                },
                loop: true,
        })
        var s4 = new Swiper("#tv03",{
            slidesPerView: 5,//一屏几张图
                spaceBetween: 50,//图间间距
                autoplay: {
                    delay: 2000,//换图时间
                    disableOnInteraction: false//操作后轮播不停止
                },
                loop: true,
        })
        $("#mu a").click(function(){
	    var $anchor=$(this);
        $('html,body').stop().animate({
            scrollTop:$($anchor.attr('href')).offset().top},1000,'easeInOutExpo');
            return false;
	})
    </script>
</body>
</html>